<template>
  <div class="container">
    <el-button type="primary" @click="goHomePage">跳转到Home页</el-button>
    <div class="btns">
      <!-- 微软 Office Web Viewer 服务 -->
      <button @click="previewOffice(fileUrl.docx)">预览docx</button>
      <button @click="previewOffice(fileUrl.xlsx)">预览xlsx</button>
      <button @click="previewOffice(fileUrl.pptx)">预览pptx</button>
      <button @click="previewOffice(fileUrl.pdf)">预览PDF</button>
      <button @click="previewOffice(fileUrl.myFile)">预览本服务器上文件</button>
    </div>
    <!-- 通过 iframe 嵌入 -->
    <iframe class="previewOffice" :src="officeUrl"></iframe>
  </div>
</template>

<script>
export default {
  name: "FileView",
  props: ['id', 'name'],
  data(){
    return{
      fileUrl:{
        docx:"https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.docx",
        pptx:"https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.pptx",
        xlsx:"https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.xlsx",
        pdf:"https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.pdf",
        myFile:"http://47.98.242.158/uploadFiles/partyaffair/partyday/1.2 党小组划分.docx"
      },
      officeUrl:"",
    }
  },
  created() {
    // this.user = this.$route.params;
    // console.log("name",this.user.name);
    // console.log("id",this.user.id);
    // this.initRequest();
  },
  methods:{
    goHomePage(){
      this.$router.push({
        path:"/",
        query:{
          id:12,
          name:"赵奢"
        }
      })
    },
    previewOffice(url){
      // 考虑到特殊字符，通过 encodeURIComponent 处理一下 url
      this.officeUrl = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(url)}`
    }
  }
}
</script>

<style>
body {
  margin: 0;
}
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.previewOffice {
  flex: 1;
}
.copy-btn {
  background-color: #070;
  color: #fff;
}



</style>